import React, { Component } from 'react';
import { View, Image, Text, StyleSheet, ImageBackground, TouchableWithoutFeedback, ScrollView, FlatList } from 'react-native';
import { connect } from 'react-redux'
import { Colors, AppStyles } from '../../style';
import Images from '../../images';
import LookMore from '../../common/components/LookMore';
import ClassItem from '../../common/components/ClassItem';
import ShopItem from '../../common/components/ShopItem';

var screenWidth = require('Dimensions').get('window').width;
var screenHeight = require('Dimensions').get('window').height;
const imageHeight = screenWidth * 3 / 4;

const qualificationImageWidth = (screenWidth - 40) / 3;
const qualificationImageHeight = qualificationImageWidth * 3 / 4;
/**
 * 教练详情
 */
@connect()
export default class CoachDetail extends Component {
    static navigationOptions = {
        title: '教练详情'
    }
    render() {
        return (
            <ScrollView>
                <View style={styles.container}>
                    <ImageBackground style={styles.Image}>
                        <View style={{
                            position: 'absolute',
                            width: 70, height: 25,
                            borderRadius: 15,
                            backgroundColor: 'rgba(255,255,255,0.5)',
                            justifyContent: 'center',
                            alignItems: 'center',
                            bottom: 5, right: 5,
                            flexDirection: 'row'
                        }}>
                            <Image source={Images.image}
                                style={{ width: 20, height: 20, marginRight: 5 }} />
                            <Text style={AppStyles.smallTextStyle}>55</Text>
                        </View>
                    </ImageBackground>
                    <View style={styles.black} />
                    <View style={styles.item}>
                        <View style={{ margin: 10 }}>
                            <Text style={AppStyles.bigTextStyle}>教练姓名</Text>
                            <Image style={{ width: 60, height: 10, marginTop: 2, marginLeft: 3 }}
                                source={Images.star5} />
                        </View>
                    </View>
                    <View style={styles.black} />
                    <View style={[styles.item, { height: 50 }]}>
                        <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 10 }}>
                            <Image source={Images.qualification}
                                style={{ width: 30, height: 30, marginRight: 10 }} />
                            <Text style={AppStyles.mediumTextStyle}>资格认证</Text>
                        </View>
                    </View>
                    <FlatList data={[1, 2, 3, 4]} renderItem={this._renderItem} horizontal={true} />
                    <View style={styles.black} />
                    <View>
                        <Text style={[AppStyles.mediumTextStyle, { marginLeft: 10 }]}>授课门店</Text>
                    </View>
                    <ShopItem />
                    <View style={styles.black} />
                    <View style={styles.title}>
                        <Text style={[AppStyles.mediumTextStyle, { marginLeft: 10 }]}>团体课</Text>
                    </View>
                    <View style={[styles.black, { height: 1, marginLeft: 10, }]} />
                    <ClassItem />
                    <ClassItem />
                    <ClassItem />
                    <ClassItem />
                    <LookMore>
                        <ClassItem />
                        <ClassItem />
                        <ClassItem />
                    </LookMore>
                    <View style={styles.black} />
                    <View style={styles.title}>
                        <Text style={[AppStyles.mediumTextStyle, { marginLeft: 10 }]}>私教课</Text>
                    </View>
                    <View style={[styles.black, { height: 1, marginLeft: 10, }]} />
                    <ClassItem />
                    <ClassItem />
                    <ClassItem />
                    <ClassItem />
                    <LookMore>
                        <ClassItem />
                        <ClassItem />
                        <ClassItem />
                    </LookMore>
                    <View style={styles.black} />
                </View>
            </ScrollView>
        )
    }
    _renderItem = ({ item }) => {
        return <View style={{ marginLeft: 10, borderWidth: 1, borderColor: Colors.grey, justifyContent: 'center', alignItems: 'center' }}>
            <Image source={Images.image1} style={{ width: qualificationImageWidth, height: qualificationImageHeight }} />
            <Text style={[AppStyles.smallTextStyle,{marginTop:2,marginBottom:5}]}>认证资格</Text>
        </View>
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    titleBar: {
        width: screenWidth,
        height: 60,
        backgroundColor: Colors.black,
        position: 'absolute',
        zIndex: 2,
        opacity: 0.0
    },
    Image: {
        width: screenWidth,
        height: imageHeight,
        backgroundColor: Colors.orange
    },
    item: {
        width: screenWidth,
        marginTop: 5,
        justifyContent: 'center'
    },
    title: {
        width: screenWidth,
        height: 35,
        justifyContent: 'center'
    },
    black: {
        width: screenWidth,
        height: 5,
        backgroundColor: Colors.grey
    }
})